/**
 * 自定义Input组件
 * by zhangxinyue
 * create 2020-08-28
 * update 2023.06.28 by JuYe about react升级
 */
import React from 'react';
import PropTypes from 'prop-types';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Input, Tooltip, Form } from 'antd';
import { FormItemLayout, NoLableLayout } from '../formPub';
import styles from './index.less';

const { TextArea } = Input;

class InputC extends React.Component {
  static defaultProps = {
    onRef: () => {},
    title: '', // 标题
    initialValue: '', // 默认值
    placeholder: '', // 占位符
    helper: '', // 提示信息
    onChange: () => {}, // 改变回调
    onBlur: () => {}, // 失焦回调
    formItemLayout: FormItemLayout, // 设置
    disabled: false, // 禁用
    tooltipInfo: '', // tooltip
    showALLValue: false, // 展示tooltip
    labalWrap: false, // 换行显示
    rightContent: null, // 右侧的内容
    allowClear: true, // 清空
    rules: [], // 校验规则
    // showTitle: true,
    autosize: false, // 文本域高度自适应
    style: {}, // 样式
    styleRow: {},
    colon: false, // 冒号
  };

  constructor(props) {
    super(props);

    this.state = {
      tooltipInfo: props.initialValue ? <div style={{ maxWidth: '300px', wordBreak: 'break-all' }}>{props.initialValue}</div> : '', // 鼠标移动到组件，展示当前选中项全称
    };
  }

  componentDidMount() {
    // 父组件对本组件的引用
    this.props.onRef(this);
  }

  setTooltip = (e) => {
    this.setState({
      tooltipInfo: <div style={{ maxWidth: '300px', wordBreak: 'break-all' }}>{e}</div>,
    });
  };

  handleOnChange = (e) => {
    this.props.onChange(e ? e.target.value : ''); // 抛出数据
    if (this.props.showALLValue) this.setTooltip(e.target.value); // 设置tooltip数据
  };

  // 右侧内容点击效果
  handleRightBtnClick = (e) => {
    this.props.rightContentClick && this.props.rightContentClick();
  };

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (prevProps.initialValue !== this.props.initialValue) {
      this.props.form.setFieldsValue({
        [this.props.dataIndex]: this.props.initialValue,
      });
      this.setTooltip(this.props.initialValue);
    }
  }

  render() {
    const {
      title,
      dataIndex,
      initialValue,
      placeholder,
      rightContent,
      rightBtnWrapStyle,
      onBlur,
      helper,
      prefix,
      suffix,
      formItemLayout,
      disabled,
      max,
      allowClear,
      labalWrap,
      showTextArea,
      autosize,
      style,
      styleRow,
      rules,
      colon,
    } = this.props;
    return (
      <Form.Item>
        <div className={styles.rightContentBtn} style={rightContent ? { position: 'relative', display: 'inline-flex', alignItems: 'center', width: '100%' } : {}}>
          <div style={({ width: '100%' }, rightContent && { flex: '1' })}>
            {!showTextArea ? (
              <Tooltip title={this.props.showALLValue ? this.state.tooltipInfo : ''}>
                <Form.Item
                  labelCol={title ? formItemLayout.labelCol : NoLableLayout.labelCol}
                  wrapperCol={title ? formItemLayout.wrapperCol : NoLableLayout.wrapperCol}
                  className={labalWrap ? 'labalWrap' : ''}
                  label={
                    title ? (
                      helper ? (
                        <span>
                          {title}&nbsp;
                          <Tooltip title={helper}>
                            <QuestionCircleOutlined />
                          </Tooltip>
                        </span>
                      ) : (
                        <span>{title}</span>
                      )
                    ) : undefined
                  }
                  name={dataIndex}
                  initialValue={initialValue}
                  rules={rules}
                  colon={colon}
                  getValueFromEvent={(event) => {
                    return event.target !== undefined ? event.target.value.replace(/\s+/g, '') : event;
                  }}
                >
                  <Input
                    placeholder={placeholder}
                    onChange={this.handleOnChange}
                    onBlur={onBlur}
                    prefix={prefix}
                    suffix={
                      rightContent ? (
                        <>
                          {suffix}
                          <div className={styles.rightBtnWrap} style={rightBtnWrapStyle ? rightBtnWrapStyle : null} onClick={this.handleRightBtnClick}>
                            {rightContent}
                          </div>
                        </>
                      ) : (
                        suffix
                      )
                    }
                    disabled={disabled}
                    allowClear={allowClear}
                    maxLength={max}
                    style={style ? style : styleRow ? styleRow : null}
                  />
                </Form.Item>
              </Tooltip>
            ) : (
              <Form.Item
                labelCol={title ? formItemLayout.labelCol : NoLableLayout.labelCol}
                wrapperCol={title ? formItemLayout.wrapperCol : NoLableLayout.wrapperCol}
                className={labalWrap ? 'labalWrap' : ''}
                label={
                  title ? (
                    helper ? (
                      <span>
                        {title}&nbsp;
                        <Tooltip title={helper}>
                          <QuestionCircleOutlined />
                        </Tooltip>
                      </span>
                    ) : (
                      <span>{title}</span>
                    )
                  ) : undefined
                }
                name={dataIndex}
                initialValue={initialValue}
                rules={rules}
                colon={colon}
                getValueFromEvent={(event) => {
                  return event.target !== undefined ? event.target.value.replace(/\s+/g, '') : event;
                }}
              >
                <TextArea
                  placeholder={placeholder}
                  onChange={this.handleOnChange}
                  onBlur={onBlur}
                  disabled={disabled}
                  maxLength={max}
                  autoSize={autosize}
                  style={style ? style : styleRow ? styleRow : { marginTop: '5px' }}
                />
              </Form.Item>
            )}
          </div>
        </div>
      </Form.Item>
    );
  }
}

// props类型
InputC.propsTypes = {
  title: PropTypes.string, // 显示名称
  dataIndex: PropTypes.string, // Form识别的Item ID
  initialValue: PropTypes.string, // 初始默认值
  placeholder: PropTypes.string, // 占位符
  rightContent: PropTypes.element, // 右侧自定义元素
  rightBtnWrapStyle: PropTypes.object, // 右侧自定义元素外层样式
  allowClear: PropTypes.bool, // 是否允许清空
  onChange: PropTypes.func, // 输入框内容变化时的回调
  onBlur: PropTypes.func, // 失焦时的回调
  helper: PropTypes.oneOfType([
    // 提示帮助信息
    PropTypes.string,
    PropTypes.element,
  ]),
  prefix: PropTypes.element, // input前缀图标
  suffix: PropTypes.element, // input后缀图标
  rules: PropTypes.array, // 校验规则
  formItemLayout: PropTypes.object, // 布局
  disabled: PropTypes.bool, // 禁用
  max: PropTypes.number, // 最大长度
  onRef: PropTypes.func, // 本组件的引用（可用来父组件调用内部方法）
  // showTitle: PropTypes.bool, // 是否展示输入框名称
  labalWrap: PropTypes.bool, // 标记title是否需要换行
  showTextArea: PropTypes.bool, // 标记是否展示text文本框
  autosize: PropTypes.bool, // 当showTextArea为true时，设置text文本框是否自适应高度
  style: PropTypes.object,
  styleRow: PropTypes.object, // style和styleRow都是设置元素的样式，style优先级高
  showALLValue: PropTypes.bool, // 设置是否展示tooltip
};
export default InputC;
